<template>
    <div>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group
                ref="elCheckBoxGroup"
                filterable
                :disabled="disabled"
                :readonly="readonly"
                v-model="localValue"
                :min="min"
                :max="max"
                @change="handleCheckedChange"
                v-on:focus="handleFocus($event)"
                v-on:blur="handleBlur($event)"
                v-on:change="emitChange"
                v-on:input="emitInput"
        >
            <template v-for="(item,index) in localData">
                <template v-if="radioType == 'button'">
                    <el-checkbox-button :key="index" :label="$_object_getValue(item,optionProp.value)"
                                        :disabled="item.isDisabled || false"
                    >{{$_object_getValue(item,optionProp.label)}}</el-checkbox-button>
                </template>
                <el-checkbox v-else :key="index" :label="$_object_getValue(item,optionProp.value)"
                             :disabled="item.isDisabled || false"
                >{{$_object_getValue(item,optionProp.label)}}</el-checkbox>
            </template>
        </el-checkbox-group>
    </div>
</template>

<script>
    import objectMixin from "../../mixin/ObjectMixin"
    export default {
        name: 'CheckBoxGroup',
        mixins:[objectMixin],
        props: {
            value: {
                required: true
            },
            min:{
                type: Number
            },
            max:{
                type: Number
            },
            // 数据地址
            url: {
                type: String
            },
            // 可以自定义数据，
            data:{
                type: Array,
                default: function () {
                    return []
                }
            },
            checkBoxType:{
                type: String,
                default: 'checkbox' // button可选
            },
            // 是否禁用
            disabled:{
                type:Boolean,
                default:false
            },
            readonly:{
                type:Boolean,
                default:false
            },
            optionProp:{
                type: Object,
                default:function () {
                    return {
                        value: 'id',
                        label: 'name'
                    }
                }
            }
        },
        data () {
            return {
                localValue: this.value,
                localData: this.data,
                checkAll: false,
                isIndeterminate: true
            }
        },
        mounted () {
            this.getDataByUrl(this.url)
        },
        methods: {
            handleFocus (event) {
                this.$emit('focus', event)
            },
            handleBlur (event) {
                this.$emit('blur', event)
            },
            emitChange (val) {
                this.$emit('change', val)
                this.$emit('selectData', this.getSelectData(val))
            },
            emitInput (val) {
                this.$emit('input', val)
                this.$emit('selectData', this.getSelectData(val))

            },
            getSelectData(val){
                let r = []
                if(val && val.length>0){
                    for (let i = 0; i < this.localData.length; i++) {

                        if (val.some(item=>item == this.$_object_getValue(this.localData[i], this.optionProp.value))) {
                            r.push(this.localData[i])
                        }
                    }
                }
                return []
            },
            // 加载
            getDataByUrl (url) {
                if(!url){
                    return
                }
                this.axios.get(url).then(res => {
                    this.localData = res.data

                }).catch(error=>{
                    this.localData = []
                    if(error.response){
                        if(error.response.status == 401){
                            return
                        }
                        if(error.response.status != 404){
                            this.$message.error(error.response.data.msg)
                        }
                    }else {
                        this.$message.error('网络错误或服务不可用')
                    }
                })
            },
            handleCheckAllChange(val) {
                this.localValue = val ? this.localData.map(item =>this.$_object_getValue(item, this.optionProp.value)) : [];
                this.emitChange(this.localValue)
                this.isIndeterminate = false;
            },
            handleCheckedChange(value) {
                this.emitChange(value)
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.localData.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.localData.length;
            }
        },
        watch: {
            value(val){
                this.localValue = val
            },
            url (val){
                this.getDataByUrl(val)
            },
            data (val){
                this.localData = val
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
